<template>

    <el-card>
        <div class="clearfix">
            <span>
                待处理申请
            </span>
        </div>
        <div>
        <el-table :data="fillterAndPageData" style="width: 100%" >
            <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="原因:">
            <span>{{ props.row.reason }}</span>
          </el-form-item>
         
          
        </el-form>
      </template>
    </el-table-column>
            <el-table-column prop="id" label="序号" width="120"></el-table-column>
            <el-table-column prop="college" label="专业" width="120"></el-table-column>
            <el-table-column prop="classname" label="班级" width="120"></el-table-column>
            <el-table-column prop="name" label="名字" width="120"></el-table-column>
            <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
            <el-table-column prop="assort" label="物资种类" width="120"></el-table-column>
            <el-table-column prop="mingcheng" label="物资名称" width="120"></el-table-column>
            <el-table-column prop="stock" label="数量" width="100"></el-table-column>
          
            
            <el-table-column label="操作" >  
                    <template slot-scope="scope">
                        <el-button style="width: 70px" type="success" @click="agree(scope.row.id,scope.row.college,scope.row.classname,scope.row.assort,scope.row.mingcheng,scope.row.stock)">同意</el-button>
                        <el-button  type="danger"  @click="disagree(scope.row.id,scope.row.college,scope.row.classname,scope.row.assort,scope.row.mingcheng,scope.row.stock)">不同意</el-button>
                       
                    </template>
                </el-table-column>

        </el-table>
        <el-pagination
    
      @current-change="handleCurrentChange"
      :current-page.sync="pagenum"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="this.total">
    </el-pagination>
        
    
  
    </div>
    <el-dialog :visible.sync="dialogTableVisible" custom-class="saveAsDialog">
  <div>
   
    <el-input class="yuanyin" v-model="reason2" placeholder="原因:"  autocomplete="off"  ></el-input>
   
</div>
<div slot="footer" class="dialog-footer">
    <el-button @click="dialogTableVisible = false">取 消</el-button>
    <el-button type="primary" @click="queding">确 定</el-button>
  </div>
</el-dialog>
    </el-card>
</template>
<script>
    export default{
        data(){
            return{
                fillterAndPageData:[],
                pagenum:'',
            total:'',
                state:'通过',
                reason:'管理员同意的',
                reason2:'',
                dialogTableVisible: false,
                id:'',
                college:'',
                  classname:'',
                  assort:'',
                  mingcheng:'',
                  stock:'',
                  state2:'不通过',
                  reson2:'',
                
            }
        },
        created(){
         this.query() 
        },
        methods:{
            query(){
            fetch("http://1.15.134.100:9999/wuzi3?pageNumber="+this.pagenum,{
                method:"GET",
                headers:{
                    'token': localStorage.getItem('token'),
                },
            })
            .then(res => res.json()).then(res =>{
                this.fillterAndPageData=res.data.list
                this.total=res.data.total
             

            })
        },
        agree(id,college,classname,assort,mingcheng,stock){
            this.id=id;
            
            this.handleEdit();
            this.$router.replace({
                  path:'/main/wuzi3',query:{college,classname,assort,mingcheng,stock}
              })  
       
        },
        disagree(id,college,classname,assort,mingcheng,stock){
            console.log(college,classname,assort,mingcheng,stock)
            this.id=id,
            this.college=college,
            this.classname=classname,
            this.assort=assort,
            this.mingcheng=mingcheng,
            this.stock=stock,
            this.dialogTableVisible=true;
           
        },
        queding(){
            fetch("http://1.15.134.100:9999/wuzi2",{
            method:"POST",
            headers: {
                    'Content-type': 'application/json',
                    
                    'token': localStorage.getItem('token'),
                
                },
                body: JSON.stringify({
                  college:this.college,
                  classname:this.classname,
                  assort:this.assort,
                  mingcheng:this.mingcheng,
                  stock:this.stock,
                  state:this.state2,
                  reson:this.reason2,
            
                  

                  
                })
            
        }).then(response => response.json())
                .then(data => {
                    console.log(data);
                   
                    this.dialogTableVisible=false;
                    this.handleEdit()
                    this.$router.go(0);

                });
        },
        handleCurrentChange(pagenum) {
        
        this.pagenum=pagenum;
        this.query();
      },
      handleEdit(){
              
               fetch("http://1.15.134.100:9999/wuzi3",{
                method:"delete",
                headers:{
                    'Content-type': 'application/json',
                    'token': localStorage.getItem('token'),
                },
                body: JSON.stringify({
                    id:this.id
            
                  

                  
                })
               }).then((response)=> response.json())
               .then((data)=>{
                console.log(data);
             
               
               });
             
          },
        
        }
    }
</script>


<style>
.clearfix {
        display: flex;
       
    
    }

.saveAsDialog{
    width: 700px;
    height: 300px;
}
.dialog-footer{
    margin-top: 120px;
}
.el-pagination{
    margin-left: 800px;
}

</style>